<template>
  <div class="user">
    <div class="input">
      <el-input v-model="queryModel.query" placeholder="请输入要搜索的内容" class="input-with-select" size="large">
        <template #append>
          <el-button>
            <el-icon class="is-loading">
              <Search @click="queryModel.pagenum = 1; getlist()" />
            </el-icon>
          </el-button>
        </template>
      </el-input>
      <el-button type="primary" class="button" @click="addList">添加用户</el-button>
    </div>
    <el-table ref="form" border :data="tableData" style="width: 100%" class="table">
      <el-table-column type="index" label="#" />
      <el-table-column prop="username" label="姓名" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="mobile" label="电话" />
      <el-table-column prop="role_name" label="角色" />
      <el-table-column prop="mg_state" label="状态" width="120">
        <template #default="scope">
          <el-switch v-model="scope.row.mg_state" @change="elswitch(scope)" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220">
        <template #default="scope">
          <el-button type="primary" size="small" @click="updataList(scope)">修改</el-button>
          <el-button type="danger" size="small" @click="del(scope.row.id)">删除</el-button>
          <el-button type="warning" size="small" @click="assignUser(scope)">分配角色</el-button>
        </template>
      </el-table-column>
      
    </el-table>
    <Table :currentPage="queryModel.pagenum" :pageSize="queryModel.pagesize" :background="true" :total="total"
      @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></Table>
    <DialogForm v-model:dialogVisible="dialogVisible" :title="title" @cancel="cancel" @confirm="determine"
      v-model:ruleForm="ruleForm">
      <slot slot="body">
        <el-form :model="ruleForm" :rules="rules" class="demo-model">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username" />
          </el-form-item>
          <el-form-item v-if="!ruleForm.id" label="密码" prop="password">
            <el-input v-model="ruleForm.password" type="password" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email" />
          </el-form-item>
          <el-form-item label="电话" prop="mobile">
            <el-input v-model="ruleForm.mobile" />
          </el-form-item>
        </el-form>
      </slot>
    </DialogForm>

    <DialogForm v-model:dialogVisible="dialogVisible11" title="Tips" @cancel="cancel" @confirm="determine">
      <slot slot="body">
        <p>当前用户：{{ assignUserlist.username }}</p>
        <p>当前角色：{{ assignUserlist.role_name }}</p>
        <p>分配新角色：
          <el-select v-model="regionlist" placeholder="请选择" @change="regionid">
            <el-option v-for="(item, index) in region" :key="index" :label="item.roleName" :value="item.id" />
          </el-select>
        </p>
      </slot>
    </DialogForm>
  </div>
</template>
<script>
import { ref, reactive, toRefs, onMounted, computed } from "vue";
import { userslist, updataswitch, delList, addlist, updatalist, assignRoles, roleslist } from "../../api/users";
import { ElMessage, ElMessageBox } from "element-plus";
import Table from "../../components/table.vue";
import DialogForm from "../../components/DialogForm.vue";
export default {
  setup(props) {
    //弹出框取消
    const cancel = () => {
      data.dialogVisible = false
    }
    //点击弹出框确定
    const determine = () => {
      console.log(111);
    }
    const data = reactive({
      regionlist: "",
      rid: 0,
      region: [],
      //分配角色
      assignUserlist: [],
      //表格数据
      tableData: [],
      //总页数
      total: 0,
      //分页
      queryModel: {
        //搜索输入框绑定关键字
        qurey: "",
        //当前页数
        pagenum: 1,
        //一页显示几条
        pagesize: 5,
      },
      //弹出框
      dialogVisible: false,
      dialogVisible11: false,
      ruleForm: {},
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { max: 5, min: 2, message: "长度必须是3到5位" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { max: 10, min: 6, message: "长度必须是6到10位" },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { type: "email", message: "邮箱格式不正确" },
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { max: 11, min: 11, message: "请输入正确的手机号", pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/ },
        ],
      }
    });
    const title = computed(() => {
      return data.ruleForm.id ? "修改用户" : "添加用户";
    });
    onMounted(() => {
      getlist();
    });
    //请求表格数据
    const getlist = () => {
      userslist(data.queryModel).then((res) => {
        const { users, total } = res.data;
        data.tableData = users;
        data.total = total;
      });
    };
    //监听条数变化
    const handleSizeChange = (val) => {
      // console.log(val);
      data.queryModel.pagesize = val;
      getlist();
    };
    //监听页数变化
    const handleCurrentChange = (val) => {
      // console.log(val);
      data.queryModel.pagenum = val;
      getlist();
    };
    //更改状态请求
    const elswitch = (val) => {
      let model = {
        id: val.row.id,
        status: val.row.mg_state,
      };
      updataswitch(model);
    };
    //删除列表
    const del = (id) => {
      ElMessageBox.confirm("你确定要删除本条数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delList(id);
          getlist();
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消",
          });
        });
    };
    // 添加请求
    const addList = () => {
      data.ruleForm = {};
      data.dialogVisible = true;
    };
    //修改用户
    const updataList = (ruleForm) => {
      data.ruleForm = ruleForm.row;
      data.dialogVisible = true;
    };
    /**
     * 点击弹出框确定按钮
     */
    const confirm = async () => {
      console.log(data.ruleForm);
      if (data.ruleForm.id) {
        updatalist(data.ruleForm);
        getlist();
      }
      else if (!data.ruleForm.id) {
        addlist(data.ruleForm);
        getlist();
      }
      data.dialogVisible = false;
    };
    /**
     * 分配角色
     */
    const assignUser = (ruleForm) => {
      data.assignUserlist = ruleForm.row;
      roleslist().then(res => {
        data.region = res.data;
        console.log(res);
      });
      data.dialogVisible11 = true;
    };
    /**
     *
     * 获取级联选择器的数据rid
     */
    const regionid = (value) => {
      data.rid = value;
    };
    /**
     * 点击分配权限的确定按钮发送请求
     */
    const assign = async () => {
      let id = data.assignUserlist.id;
      await assignRoles(id, data.rid);
      getlist();
      data.dialogVisible11 = false;
    };
    return {
      ...toRefs(data),
      handleSizeChange,
      handleCurrentChange,
      elswitch,
      getlist,
      del,
      addList,
      title,
      updataList,
      confirm,
      assignUser,
      assign,
      regionid,
      cancel,
      determine
    };
  },
  components: { Table, DialogForm }
};
</script>
<style lang="scss" scoped>
.user {
  padding: 20px 10px;
  background: #fff;
  box-shadow: 1px 1px 30px rgb(151, 146, 146);

  .table {
    margin: 20px 0;
  }
}

.input {
  width: 400px;
  display: flex;

  .button {
    margin-left: 10px;
    height: 40px;
  }
}
</style>
